<template>
  <view>
    <date-picker @changeTime="getTime" class="sticky bg-fff z-10" id="container" :style="{top: `${top}px`}"></date-picker>
    <empty-icon v-if="!dataList.length && loadMoreStatus !== 'loading'"></empty-icon>
    <view v-else>
      <view
          class="flex align-center justify-between bg-E9F8FF br-10 m-lr-20 p-lr-20 mb-30"
          v-for="(item) in showDataList"
          :key="item.id"
          @tap="toHandleError(item.id)"
      >
        <view class="flex flex-column fz-32 lh-45 p-tb-25 oh">
          <text class="text-ellipsis">{{item.roomName || '-'}}</text>
          <text class="text-ellipsis">{{item.deviceName || '-'}}</text>
          <text class="color-CCCCCC mt-10">{{item.time || '-'}}</text>
        </view>
        <view>
          <image class="h-28 w-14 ml-20" src="@/static/images/common/toPath.png"></image>
        </view>
      </view>
      <u-loadmore class="pb-20 pt-5" :status="loadMoreStatus" @loadmore="loadMore" />
    </view>

  </view>
</template>

<script>
import getNavBarHeight from "@/mixins/getNavBarHeight";
import DatePicker from "@/components/DatePicker/DatePicker";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import { abnormalList } from "@/api/inspection/abnormal"
import dayjs from '@/libs/dayjs.min.js'
export default {
  name: "abnormal-list-done",
  components: {EmptyIcon, DatePicker},
  mixins: [getNavBarHeight],
  data() {
    return {
      dataList: [],
      startTime: '',
      endTime: '',
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      loading: false,
      hasNext: true
    }
  },
  created(){
    this.getData()
  },
  computed:{
    loadMoreStatus() {
      if (this.loading) return 'loading'
      if (this.dataList.length === this.page.total) return 'nomore'
      return 'loadmore'
    },
    showDataList(){
      return this.dataList.map(item => {
        return {
          id: item.abnormalId || '-',
          roomName: item.roomName || '-',
          deviceName: item.deviceName || '-',
          time: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm') : '-',
          value: (item.type === "0" || item.type === "1" ) ? `${item.result || '-'}` : `${Number(item.value).toFixed(2) || '-'}${item.unit || ''}`
        }
      })
    }
  },
  methods: {
    toHandleError(id){
      this.$tab.navigateTo(`/pages/work/handle-error?abnormalId=${id}`)
    },
    getTime(e) {
      if(e.startTime && e.endTime){
        this.startTime = dayjs(e.startTime).format('YYYY-MM-DD HH:mm:ss');
        this.endTime = dayjs(e.endTime).format('YYYY-MM-DD HH:mm:ss');
        this.getData()
      }else if(!e.startTime && !e.endTime){
        this.getData()
      }
    },
    getData() {
      this.loading = true
      const params = { status: 1, startTime: this.startTime, endTime: this.endTime, pageNum: this.page.pageNum, pageSize: this.page.pageSize }
      abnormalList(params).then(res => {
        this.dataList = res.rows
        this.page.total = res.total
        this.hasNext = res.hasNext
      }).finally( () => {
        this.loading = false
      })
    },
    loadMore() {
      if(this.hasNext){
        this.loading = true
        this.page.pageNum += 1
        abnormalList({
          status: 1,
          startTime: this.startTime,
          endTime: this.endTime,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }).then(res => {
          this.hasNext = res.hasNext
          this.dataList = [].concat(this.dataList, res.rows)
          this.page.total = res.total
        }).finally( () => {
          this.loading = false
        })
      }
    },
  }
}
</script>

<style scoped>

</style>
